<template>
  <!-- 事件列表弹窗 -->
  <view
    class="cu-modal bottom-modal"
    :class="modalName == 'bottomModal' ? 'show' : ''"
  >
    <view class="cu-dialog">
      <view class="cu-bar bg-title">
        <view class="action text-white">{{ title }}</view>
        <view class="action text-blue">
          <text
            @tap="hideModal"
            class="cuIcon-close text-white"
            style="font-weight: 700"
          ></text>
        </view>
      </view>
      <view
        class="content_bottom"
        :class="[showFlag == 0 || showFlag == 2 ? 'set_heitgh' : '', '']"
      >
        <!-- 图层切换 -->
        <view class="chooseImg" v-show="showFlag == 3">
          <image
            :class="[active1 ? 'active1' : '', 'empty-icon']"
            src="/static/city1.png"
            mode="aspectFill"
            @tap="checkMap('city')"
          />
          <image
            :class="[active2 ? 'active2' : '', 'empty-icon']"
            src="/static/star.png"
            mode="aspectFill"
            @tap="checkMap('')"
          />
        </view>
        <!-- 目标信息 -->
        <view v-show="showFlag == 2" style="width: 100vw; padding-bottom: 70px">
          <view class="content_list">
            <text
              class="text-black c-item"
              v-for="item in modalData"
              :key="item.index"
              >{{ item.name }} :<text class="text-grey">{{ item.value }}</text>
            </text>
          </view>
          <view class="btn_box">
            <view>
              <!-- <button
                v-if="isShowBtn"
                class="cu-btn bg-red"
                @tap="handleNavigation"
              >
                返航
              </button>
              <button
                v-if="isShowBtn"
                class="cu-btn bg-olive"
                style="margin-left: 15px"
                @tap="handleNavigation"
              >
                迫降
              </button> -->
            </view>
            <!-- <button class="cu-btn bg-blue" @tap="handleNavigation">导航</button> -->
          </view>
        </view>
        <!-- 列表 -->
        <view v-show="showFlag == 0" style="width: 100vw; padding-bottom: 60px">
          <view class="content_list list2">
            <view
              style="font-size: 20px"
              :class="[
                !showChoose ? 'cuIcon-list' : 'cuIcon-squarecheckfill',
                'set_th',
              ]"
              @tap="showChoose = !showChoose"
            ></view>
            <table>
              <!-- 设置表头 -->
              <view class="choose_box" v-show="showChoose">
                <text
                  @tap="showChoose = !showChoose"
                  class="cuIcon-close text-black clooseChoose"
                ></text>
                <view class="ctitle">设置表头：</view>
                <view
                  class="check_item checkAll"
                  @tap="handCheckAll()"
                  style="width: 120px"
                >
                  <text>全选</text
                  ><view class="box1" style="margin-left: 8px">
                    <view
                      v-show="checkAll"
                      style="font-size: 20px"
                      class="cuIcon-squarecheckfill checked"
                    ></view>
                  </view>
                </view>
                <view class="choose_item">
                  <view class="check_box">
                    <view
                      class="check_item"
                      v-for="(item1, index) in thData"
                      :key="index"
                      @tap="checkboxChange(item1)"
                    >
                      <view class="box1">
                        <view
                          v-show="item1.check"
                          style="font-size: 20px"
                          class="cuIcon-squarecheckfill checked"
                        ></view> </view
                      ><text style="margin-left: 5px">{{ item1.text }}</text>
                    </view>
                  </view>
                </view>
              </view>
              <thead>
                <th
                  v-for="(hitem, index) in thData"
                  :key="hitem.label"
                  v-if="hitem.check"
                  :style="{
                    width:
                      hitem.text === thArr[thArr.length - 1].text
                        ? '180px'
                        : 'auto',
                  }"
                >
                  {{ hitem.text }}
                </th>
              </thead>

              <tbody class="t_body">
                <slot name="markers"></slot>
              </tbody>
            </table>
          </view>
        </view>
        <!-- 站点 -->
        <view v-show="showFlag == 1" style="width: 100vw; padding-bottom: 50px">
          <view class="content_list list2">
            <table>
              <tbody class="t_body">
                <tr style="border: 1px solid #ccc">
                  <td
                    style="
                      border: 1px solid #ccc;
                      background-color: #e3dfe0;
                      width: 33%;
                    "
                  >
                    站点GCJ02坐标
                  </td>
                  <td
                    style="
                      border: 1px solid #ccc;
                      background-color: #e3dfe0;
                      width: 33%;
                    "
                  >
                    雷达名称
                  </td>
                  <td
                    style="
                      border: 1px solid #ccc;
                      background-color: #e3dfe0;
                      width: 33%;
                    "
                  >
                    雷达IP
                  </td>
                </tr>
                <tr style="border: 1px solid #ccc">
                  <td
                    style="
                      background-color: #fff;
                      color: black;
                      border: 1px solid #ccc;
                    "
                  >
                    {{
                      [
                        Number(Number(centerPoint[0]).toFixed(6)),
                        Number(Number(centerPoint[1]).toFixed(6)),
                      ] || "未知"
                    }}
                  </td>
                  <td
                    style="border-right: 1px solid #ccc; background-color: #fff"
                  >
                    {{ radarName }}
                  </td>
                  <td
                    style="border-right: 1px solid #ccc; background-color: #fff"
                  >
                    {{ radarIP }}
                  </td>
                </tr>
              </tbody>
            </table>
          </view>
        </view>
        <!-- 设置 -->
        <view v-show="showFlag == 4" style="width: 100vw; padding-bottom: 18px">
          <view class="set_box">
            <view class="s_box">
              <view class="title">刻度距离</view>
              <UniDataSelect
                :multiple="true"
                @change="circleChange"
                :localdata="localdata"
                v-model="modelLocalData"
                style="margin-top: 10px"
              ></UniDataSelect>
            </view>
            <view class="s_box">
              <view class="title">目标物信息配置</view>
              <UniDataSelect
                :multiple="true"
                @change="targetChange"
                :localdata="targetData"
                v-model="targetSetData"
                style="margin-top: 10px"
              ></UniDataSelect>
            </view>
            <view class="s_box">
              <view class="title">经纬度显示方式</view>
              <UniDataSelect
                @change="latChange"
                :multiple="false"
                :localdata="latData"
                v-model="latChangeData"
                style="margin-top: 10px"
              ></UniDataSelect>
            </view>
            <button v-if="isChange" class="bg-blue set_btn" @tap="handleSet">
              应用
            </button>
            <button v-else class="bg-gray set_btn" @tap="handleSet">
              应用
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import UniDataSelect from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
export default {
  components: {
    UniDataSelect,
  },
  name: "modal",
  data() {
    return {
      isChange: false,
      active1: false,
      active2: false,
      showChoose: false,
      setFlag: false,
      modelLocalData: ["500", "3000", "5000"],
      localdata: [
        { text: "500m", value: "500", selected: true },
        { text: "1km", value: "1000" },
        { text: "2km", value: "2000" },
        { text: "3km", value: "3000", selected: true },
        { text: "4km", value: "4000" },
        { text: "5km", value: "5000", selected: true },
        { text: "10km", value: "10000" },
        { text: "15km", value: "15000" },
      ],
      cdata: [],
      tData: [],
      checkAll: false,
      thData: [
        { text: "批号", check: true, disable: false, label: "BatchNumber" },
        { text: "类别", check: true, label: "Type" },
        { text: "距离 (m)", check: true, label: "Distance" },
        { text: "方位(°)", check: true, disable: false, label: "Azimuth" },
        { text: "幅度(dB)", check: true, label: "Amplitude" },
        { text: "速度(m/s)", check: true, label: "Speed" },
        { text: "经度(°)", check: true, disable: false, label: "Longitude" },
        { text: "纬度(°)", check: true, disable: false, label: "Latitude" },
        { text: "高度(m)", check: false, disable: false, label: "Altitude" },
        { text: "时间", check: false, disable: false, label: "Time" },
        { text: "航向(°)", check: false, disable: false, label: "Course" },
        { text: "仰角(°)", check: false, disable: false, label: "Elevation" },
        { text: "噪声(dB)", check: false, label: "Noise" },
        { text: "径向速度", check: false, label: "RadialVelocity" },
      ],
      lData: "lnglat",
      targetData: [
        { text: "批号", value: "pId", selected: true },
        { text: "方位", value: "position" },
      ],
      targetSetData: [],
      latData: [
        { text: "度分秒", value: "du" },
        { text: "度°", value: "lnglat" },
      ],
      latChangeData: "lnglat",
    };
  },
  props: {
    centerPoint: {
      type: Array,
      default: null,
    },
    radarIP: {
      type: String,
      default: null,
    },
    radarName: {
      type: String,
      default: null,
    },
    modalName: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
    modalData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    chooseMap: {
      type: Boolean,
      default: false,
    },
    showFlag: {
      // 控制显示内容
      type: Number,
      default: null,
    },
    isShowBtn: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    show(newVal, oldVal) {
      return (newVal = this.chooseMap);
    },
    thArr() {
      let arr = [];
      this.thData.forEach((item) => {
        if (item.check) {
          arr.push(item);
        }
      });
      return arr;
    },
  },
  created() {
    this.getModalData();
  },

  watch: {
    cdata(newVal, oldVal) {
      if (newVal && newVal.length) {
        this.modelLocalData = newVal;
      }
    },
    lData(newVal) {
      if (newVal && newVal.length) {
        this.latChangeData = newVal;
      }
    },
    tData(newVal) {
      if (newVal && newVal.length) {
        this.targetSetData = newVal;
      }
    },
    thData(newVal) {
      if (newVal && newVal.length) {
        this.$emit("handCheck", newVal);
      }
    },
  },
  mounted() {},
  methods: {
    // 全选
    handCheckAll() {
      this.checkAll = !this.checkAll;
      this.thData = this.thData.map((item) => {
        item.check = this.checkAll;
        return item;
      });
      this.changeLabel();
    },
    checkboxChange(item1) {
      if (item1.disable) {
        return;
      } else {
        this.thData = this.thData.map((item) => {
          if (item1 == item) {
            item.check = !item.check;
          }
          return item;
        });
        this.checkAll = this.thData.every((item) => item.check);
        this.changeLabel();
      }
    },
    changeLabel() {
      let arr = [];
      this.thData.forEach((item) => {
        if (item.check) {
          arr.push(item);
        }
      });
      uni.setStorageSync("thData", this.thData);
      this.$emit("handCheck", arr);
    },
    getType(type) {
      return (
        {
          0: "大船",
          1: "中型船",
          2: "小船",
          10: "行人",
          30: "汽车",
          20: "无人机",
          "-1": "未知",
        }[type] || "未知"
      );
    },
    // 应用设置
    handleSet() {
      this.setFlag = true;
      const data = {
        modelLocalData: this.modelLocalData,
        latChangeData: this.latChangeData,
        targetSetData: this.targetSetData,
      };
      this.$emit("handleSetMap", data);
      uni.setStorageSync("circle", JSON.stringify(this.modelLocalData));
      uni.setStorageSync("lData", this.latChangeData);
      uni.setStorageSync("tData", JSON.stringify(this.targetSetData));
    },
    getModalData() {
      const thdata = uni.getStorageSync("thData")
        ? uni.getStorageSync("thData")
        : [];
      // 将两个数组合并
      let combinedArray = [...thdata, ...this.thData];
      // 使用 Map 或者 Set 进行去重
      let map = new Map();
      let uniqueArray = [];

      for (let item of combinedArray) {
        if (!map.has(item.text)) {
          map.set(item.text, true);
          uniqueArray.push(item);
        }
      }
      this.thData = uniqueArray;
      this.checkAll = this.thData.every((item) => item.check);
      // 获取缓存数据
      this.cdata = uni.getStorageSync("circle")
        ? JSON.parse(uni.getStorageSync("circle"))
        : this.cdata;

      this.tData = uni.getStorageSync("tData")
        ? JSON.parse(uni.getStorageSync("tData"))
        : this.tData;
      this.lData = uni.getStorageSync("lData")
        ? uni.getStorageSync("lData")
        : this.lData;
      this.latChangeData = uni.getStorageSync("lData")
        ? uni.getStorageSync("lData")
        : this.latChangeData;
      this.setFlag = false;
    },
    // 刻度发生变化
    circleChange(value) {
      this.isChange = !this.isChange;
      if (!this.setFlag) {
        return;
      }
      this.cdata = value.detail.value;
    },
    // 目标物选项发生变化
    targetChange(value) {
      this.isChange = !this.isChange;
      if (value.detail.data.length == 0) {
        this.targetSetData = ["pId"];
      }
      if (!this.setFlag) {
        return;
      }
      this.tData = this.targetSetData;
    },
    //经纬度选项发生变化
    latChange(value) {
      this.isChange = !this.isChange;
      if (!this.setFlag) {
        return;
      }
      this.latChangeData = value.detail.value;
    },
    hideModal() {
      //还未点应用 就还原
      if (!this.setFlag) {
        this.getModalData();
      }
      console.log("关闭");
      this.$emit("hideModal", null);
    },
    handleNavigation() {
      const _this = this;
      if (!this.latitude || !this.longitude || !this.name) return;
      // 微信
      // #ifdef MP-WEIXIN
      let _obj = {
        latitude: parseFloat(this.latitude),
        longitude: parseFloat(this.longitude),
        name: this.name,
      };
      if (this.address) {
        _obj["address"] = this.address;
      }
      uni.openLocation({
        ..._obj,
        success: function (res) {
          console.log("打开系统位置地图成功");
        },
        fail: function (error) {
          console.log(error);
        },
      });
      // #endif

      // #ifdef APP-PLUS
      // 判断系统安装的地图应用有哪些, 并生成菜单按钮
      let _mapName = [
        {
          title: "高德地图",
          name: "amap",
          androidName: "com.autonavi.minimap",
          iosName: "iosamap://",
        },
        {
          title: "百度地图",
          name: "baidumap",
          androidName: "com.baidu.BaiduMap",
          iosName: "baidumap://",
        },
        {
          title: "腾讯地图",
          name: "qqmap",
          androidName: "com.tencent.map",
          iosName: "qqmap://",
        },
      ];
      // 根据真机有的地图软件 生成的 操作菜单
      let buttons = [];
      let platform = uni.getSystemInfoSync().platform;
      platform === "android" &&
        _mapName.forEach((item) => {
          if (plus.runtime.isApplicationExist({ pname: item.androidName })) {
            buttons.push(item);
          }
        });
      platform === "ios" &&
        _mapName.forEach((item) => {
          console.log(item.iosName);
          if (plus.runtime.isApplicationExist({ action: item.iosName })) {
            buttons.push(item);
          }
        });
      if (buttons.length) {
        plus.nativeUI.actionSheet(
          {
            //选择菜单
            title: "选择地图应用",
            cancel: "取消",
            buttons: buttons,
          },
          function (e) {
            let _map = buttons[e.index - 1];
            _this.openURL(_map, platform);
          }
        );
      } else {
        uni.showToast({
          title: "请安装地图软件",
          icon: "none",
        });
        return;
      }
      // #endif
    },
    checkMap(type) {
      if (type && type == "city") {
        this.active1 = !this.active1;
        this.active2 = false;
        this.$emit("changeMap", "city");
      } else {
        this.active2 = !this.active2;
        this.active1 = false;
        this.$emit("changeMap", "star");
      }
    },
    // 打开第三方程序实际应用
    openURL(map, platform) {
      let _defaultUrl = {
        android: {
          amap: `amapuri://route/plan/?sid=&did=&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
          qqmap: `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
          baidumap: `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`,
        },
        ios: {
          amap: `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
          qqmap: `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=fuxishan_uni_client`,
          baidumap: `baidumap://map/direction?origin=${this.selfLocation.latitude},${this.selfLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&mode=driving&src=ios.baidu.openAPIdemo`,
        },
      };
      let newurl = encodeURI(_defaultUrl[platform][map.name]);
      console.log(newurl);
      plus.runtime.openURL(
        newurl,
        function (res) {
          console.log(res);
          uni.showModal({
            content: res.message,
          });
        },
        map.androidName ? map.androidName : ""
      );
    },
  },
};
</script>
<style scoped>
.cu-dialog {
  /* max-height: 300px !important; */
  /* overflow-y: scroll !important; */
}
.bg-title {
  height: 25px !important;
  min-height: 25px !important;
  position: -webkit-sticky; /* 兼容性写法 */
  position: sticky;
  top: 0;
  z-index: 100;
}
.content_bottom {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  max-height: 212px;
}
.set_heitgh {
  min-height: 212px;
}
.content_list {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
}
.btn_box {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px 0 10px;
}
.cu-list {
  margin: 10px 17px;
}
.c-item {
  width: 45%;
  padding: 5px 0;
  white-space: pre;
  /* margin: 5px 0; */
  text-align: left;
}
.cu-item1 {
  position: relative;
}
.cu-tag1 {
  position: absolute;
  top: 2px;
  left: 0;
}
.ml15 {
  margin-left: 35px;
}
.por20 {
  position: absolute;
  right: 20px;
  top: 70px;
}
.chooseImg {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  height: 130px;
  width: 100vw;
  padding: 0 20px;
  margin: 20px 0;
}
.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 30px;
}
.active1,
.active2 {
  border: 2px solid red;
}
.set_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 270px;
}
.s_box {
  /* min-width: calc(4em + 15px); */
  display: flex;
  width: 100%;
  background-color: #fff;
  flex-direction: column;
  padding: 5px 15px;
  font-size: 16px;
  border-top: 1px solid #ccc;
  justify-content: space-between;
}
.set_btn {
  position: absolute;
  right: 20px;
  top: 40px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}
.title {
  font-weight: 700;
  text-align: left;
}
.list2 {
  padding: 0px !important;
}
/* 设置表格边框样式 */
table {
  border-collapse: collapse;
  width: 100%;
  max-height: 300px;
  /* height: 300px; */
}
.t_body {
  max-height: 300px;
  position: -webkit-sticky; /* 兼容性写法 */
}
/* 设置表头样式 */
th {
  background-color: #edf2fa; /* 蓝色背景 */
  color: #000; /* 白色字体 */
  padding: 5px;
  border-right: #ccc 1px solid;
  position: sticky;
  top: 0;
}
/* 设置其他单元格样式 */
td {
  padding: 10px 5px;
  word-break: break-all; /* 英文超出强制换行 */
  color: black; /* 黑色字体 */
}
.to_btn {
  width: 50px;
  height: 28px;
  line-height: 28px;
  border-radius: 5px;
  background-color: #4095e5;
  color: white; /* 白色字体 */
}
thead {
  border-left: #ccc solid 1px;
  position: sticky;
}
.set_th {
  position: absolute;
  right: 20px;
  top: 30px;
  color: #000;
  z-index: 10000;
  font-weight: 700;
}
.choose_box {
  position: absolute;
  right: 30px;
  top: 50px;
  width: 750px;
  min-height: 100px;
  background-color: #eee;
  z-index: 100000000;
  border: 1px solid #ccc;
  padding: 3px 15px;
  border-radius: 10px;
}
.ctitle {
  height: 30px;
  line-height: 30px;
  text-align: left;
}
.check_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.check_item {
  width: auto;
  width: 100px;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 5px 8px;
}
.box1 {
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
}
.checked {
  width: 17px;
  height: 17px;
  color: #4095e5;
  position: absolute;
  left: -2px;
  top: -3px;
}
.checkAll {
  position: absolute;
  left: 90px;
  top: 2px;
}
.clooseChoose {
  position: absolute;
  right: 9px;
  top: 2px;
  font-weight: 700;
  font-size: 18px;
}
</style>
